<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品配送清单</title>
</head>
<body>
<h1>商品订购单</h1>
<table border="1" width="400px" id="order_table">
    <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
  <tr>
    <th>无线耳机</th>
    <th class="price">￥199.00</th>
    <td><input type="number" min="0" value="1" oninput="a()"></td> <!--oninput事件，当输入框的值发生变化时，调用a()函数-->
    <th class="subtotal"></th>
  </tr>
  <tr>
    <th>智能手表</th>
    <th class="price">￥599.00</th>
    <td><input type="number" min="0" value="0" oninput="a()"></td>
    <th class="subtotal"></th>
  </tr>
  <tr>
  <th>移动电源</th>
  <th class="price">￥89.00</th>
  <td><input type="number" min="0" value="0" oninput="a()"></td>
  <th class="subtotal" ></th>
  </tr>
  <tr>
  <th colspan="3" >总计</th>
  <th id="total"> </th>
  </tr>
</table>
<h1>收货信息</h1>
<label>收货人：<input type="text"></label><br>
<label>联系电话:<input type="number"></label><br>
<label>所在地区:
    <select id="province">
            <option>请选择省份</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
    </select>
</label>
<label>
    <select id="city">
           <option>请选择城市</option>
           <option></option>
           <option></option>
           <option></option>
    </select>
</label>
<label>
    <select id="district">
           <option>请选择区县</option>
           <option></option>
           <option></option>
           <option></option>
    </select>
</label>
<br>
<label>
详细地址:<textarea rows="4" cols="20"></textarea>
</label>
    <br>
<label>
配送时间:<input type="radio">上午9：00-12：00
        <input type="radio">下午14：00-18：00
</label>
<br>
<label>
支付方式<select>
    <option>支付宝</option>
    <option>微信支付</option>
</select>
</label>
<br>
<input type="submit" value="提交订单">
</body>
</html>
<script>
  function a(){
    const table = document.getElementById("order_table"); // 获取表格id=order_table的表格元素
    const rows=table.rows;//获取表格id=order_table表格的所有行
    let  total=0; //初始化总价为0
      //遍历表格的行，从第二行开始，到倒数第二行结束，因为第一行和最后一行是表头和总计行，不需要计算
    for(let i=1;i<rows.length-1;i++){
      const price_cell = rows[i].querySelector(".price");//获取当前行的单价单元格
      const quantity_input=rows[i].querySelector("input[type='number']");//获取当前行的数量输入框
      const  subtotal_cell = rows[i].querySelector('.subtotal');//获取当前行的小计单元格
      const price=parseFloat(price_cell.textContent.replace('￥',''))//获取单价单元格的文本内容，去掉￥符号，转换为浮点数
      const quantity=parseInt(quantity_input.value);//获取数量输入框的值，转换为整数
      const subtotal=price*quantity;//计算小计
      subtotal_cell.textContent = `￥${subtotal.toFixed(2)}`;//将小计的值设置为小计单元格的文本内容
      total=total+subtotal;//累加总价
    }
    document.getElementById("total").textContent= `￥${total.toFixed(2)}`;//将总价设置为总计单元格的文本内容
  }
  window.onload = a();//页面加载时调用计算函数
</script>
<script>
    //地区数据
    const areaData = {                                       //定义一个对象，包含了不同省份的城市和区县信息
        北京: {
            城市: ['东城', '西城', '朝阳', '海淀'],              //定义了北京的城市数组
            区县: {                                           //定义了北京的区县对象，包含了不同城市的区县信息
                东城: ['东华门街道', '建国门街道', '东直门街道'],   //每个城市对应一个数组，数组中包含了该城市的区县信息
                西城: ['西长安街街道', '金融街街道', '广安门外街道'],
                朝阳: ['朝阳门街道', '东直门街道', '崇文门街道'],
                海淀: ['海淀黄庄街道', '北土城街道', '北土城街道']
            }
        },
        上海: {
            城市: ['浦东', '徐汇', '长宁', '杨浦'],
            区县: {
                浦东: ['陆家嘴街道', '外滩街道', '黄浦区街道'],
                徐汇: ['徐汇区街道', '漕河泾街道', '黄浦区街道'],
                长宁: ['长宁区街道', '虹桥街道', '黄浦区街道'],
                杨浦: ['杨浦区街道', '五角场街道', '黄浦区街道']
            }
        },
        广州: {
            城市: ['天河', '越秀', '荔湾', '海珠'],
            区县: {
                天河: ['天河区街道', '越秀区街道', '海珠区街道'],
                越秀: ['越秀区街道', '海珠区街道', '荔湾区街道'],
                荔湾: ['荔湾区街道', '海珠区街道', '天河区街道'],
                海珠: ['海珠区街道', '越秀区街道', '天河区街道']
            }
        }
    };

        // 元素引用
        const provinceSelect = document.getElementById('province');//获取id为province的元素
        const citySelect = document.getElementById('city');        //获取id为city的元素
        const districtSelect = document.getElementById('district');//获取id为district的元素

        // 清空选项函数
        function clearOptions(selectElement){                  //定义一个函数，用于清空select元素的选项
          while (selectElement.options.length > 1) {          //当select元素的选项数量大于1时，执行循环
             selectElement.remove(1);                         //删除select元素的第一个选项
          }
        }

        // 省份变化事件
      provinceSelect.addEventListener('change', function() { //为provinceSelect元素添加一个change事件监听器，当选择框的值发生变化时，执行函数
        const selectedProvince = this.value;                   //获取选择框的值
        clearOptions(citySelect);                              //调用clearOptions函数，清空citySelect元素的选项
        clearOptions(districtSelect);                          //调用clearOptions函数，清空districtSelect元素的选项

        if (selectedProvince) {                                //如果选择框的值不为空，执行if语句块
         const cities = areaData[selectedProvince].城市;        //获取areaData对象中selectedProvince对应的城市数组
            cities.forEach(city => {                              //遍历城市数组，为每个城市创建一个选项
              const option = document.createElement('option');      //创建一个新的option元素
              option.value = city;                                 //设置option元素的值为城市名称
              option.textContent = city;                            //设置option元素的文本内容为城市名称
              citySelect.appendChild(option);                      //将option元素添加到citySelect元素中
            });
         }
      });

        // 城市变化事件
        citySelect.addEventListener('change', function() {
        const selectedCity = this.value;
        const selectedProvince = provinceSelect.value;
        clearOptions(districtSelect);

        if (selectedProvince && selectedCity) {
        const districts = areaData[selectedProvince].区县[selectedCity];
        districts.forEach(district => {
        const option = document.createElement('option');
        option.value = district;
        option.textContent = district;
        districtSelect.appendChild(option);
    });
    }
    });
</script>
